<template>
  <div class="header">
      <div class="header-back"></div>
      <div class="hometitle">
          <span>全球</span>
         <img src="https://pages.c-ctrip.com/you/livestream/lvpai_home_switcharr_v1.png" alt="">
      </div>
      <div class="headsearch">
          <img src="https://pages.c-ctrip.com/you/livestream/tripshoot_search@3x.png" alt="">
       <span>试试搜“旅行热点”</span>
      </div>
      <div class="user">
          <img src="https://dimg04.c-ctrip.com/images/t1/headphoto/424/398/503/0386f569fd0d4b488ff41b64bbc5743b_C_180_180.jpg" alt="">
      </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.header {
  width: 100%;
  height: 0.44rem;
  background-color: #fff;
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding-left: .12rem;
  z-index: 99;
}
.header-back{
    background: url(https://pages.c-ctrip.com/you/livestream/tripshoot_forward%20_black@3x.png) no-repeat 50%;
    background-size: .24rem;
    width: .24rem;
    height: .24rem;
    margin: .1rem 0;
}
.hometitle{
    font-size: .15rem;
    height: .22rem;
    margin-right: .1rem;
}
.hometitle img{
    width: .16rem;
    height: .16rem;
    margin: 0 0 0 .04rem;
}
.headsearch{
    height: .32rem;
    width: 2.25rem;
    background: #f4f4f4;
    border-radius: .32rem;
    line-height: .32rem;
}
.headsearch img{
    width: .12rem;
    height: .12rem;
    margin: 0 .08rem 0 .06rem;
}
.headsearch span{
    font-size: .14rem;
    color: #999;
}
.user{
    width: .33rem;
    height: .33rem;
    padding: .05rem .01rem .06rem;
    margin-left: .11rem;
}
.user img{
     width: .21rem;
     height: .21rem;
     border-radius: 50%;
}
</style>